<template>
	<view class="container">
		<headers>忘记密码</headers>
		
		<view class="seins">
			<view class="centwe">
				<view class="urtems">
					<view class="shud">
						手机/邮箱
					</view>
					<view class="conste">

						<view class="xijsd" v-if="isAccountFouce " :class="inputTelClass">

							<view class="sechs" v-if="ishowacc"  @click="opencury">
								<image class="cury" src="/static/dazi/china.png" mode=""></image>
								<view class="senum">
									+86
								</view>
								<image class="botm" src="/static/dazi/Polygon 2.png" mode="widthFix"></image>
							</view>
							<view class="incenm">
								<input type="text" placeholder="输入手机号或者邮箱." v-model="account" placeholder-class="co" />
							</view>
							<image class="siecle" v-if="ishowacc" src="/static/dazi/cle.png" mode=""
								@click="account =''"></image>
						</view>

						<view class="" v-else>
							<view class="xijsd">
								<view class="incenm">
									<input type="text" placeholder="输入手机号或者邮箱.." v-model="account"
										placeholder-class="co" />
								</view>
								<image v-if="ishowacc" class="botm" src="/static/dazi/cle.png" mode=""
									@click="account =''"></image>


							</view>
							<!-- 显示联想的邮箱后缀 -->
							<view v-if="showSuggestions && suggestions.length > 0" class="suggestions">
								<view v-for="(domain, index) in suggestions" :key="index" @click="selectDomain2(domain)"
									class="suggestion-item">
									{{ emailPart }}@{{ domain }}
								</view>
							</view>
						</view>

					</view>
				</view>

				<view class="urtems">
					<view class="shud">
						新的密码
					</view>
					<view class="conste">
						<view class="xijsd">

							<view class="incenm">
								<input type="text" placeholder="填写密码" placeholder-class="co" />
							</view>
							<view class="">
								<image v-if="ispass" class="siecle" src="/static/dazi/ke.png" mode=""></image>
								<image v-else class="siecle" src="/static/dazi/nokan.png" mode=""></image>
							</view>

						</view>

					</view>
				</view>

				<view class="urtems">
					<view class="shud">
						确认密码
					</view>
					<view class="conste">
						<view class="xijsd">

							<view class="incenm">
								<input type="text" placeholder="再次填写密码" placeholder-class="co" />
							</view>
							<view class="">
								<image v-if="ispass2" class="siecle" src="/static/dazi/ke.png" mode=""></image>
								<image v-else class="siecle" src="/static/dazi/nokan.png" mode=""></image>
							</view>

						</view>

					</view>
				</view>





				<view class="urtems">
					<view class="shud">
						验证码
					</view>
					<view class="conste">
						<view class="xijsd">

							<view class="incenm">
								<input type="text" placeholder="请输入验证码" placeholder-class="co" />
							</view>
							<view class="send" @click="sencode">
								发送验证码
							</view>

						</view>

					</view>
				</view>

	



			</view>
			
			
			<view class="busnd btnact ash">
				修改密码
			</view>
		</view>
		
		
		<up-overlay :show="show2" @click="show2 = false"
			style="display: flex;align-items: flex-end;justify-content: flex-end;width: 750rpx;">
			<view class="sleguo" @tap.stop>
				<view class="ropwen">
					<view class="lesi">
						选择国家/地区代码
					</view>
					<image class="ediuyt" @click="show2=false " src="/static/dazi/clos.png" mode=""></image>
				</view>
				<view class="serdh">
					<u--input placeholder="搜索" prefixIcon="search" v-model="query" 
						prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				</view>
				<view class="sercha">
					<scroll-view scroll-y="true" style="height: 800rpx;">
						<view class="comyst">
							<view class="ontet" v-for="(item,index) in filteredItems" :key="index"
								:class="doubelslel ==index?'doubelslel':'' " @click="changecurry(item)">
								<view class="klia">
									<image :src=" item.country_image " mode=""></image>
									<view class="nals">
										{{item.en}}
									</view>
								</view>
								<view class="ados">
									+{{item.mobile_code}}
								</view>
							</view>
		
						</view>
					</scroll-view>
		
				</view>
			</view>
			<!-- </u-popup> -->
		</up-overlay>
		
		

	</view>
</template>

<script>
	export default{
		data(){
			return{
					isAccountFouce: true, //手机邮箱是否聚焦
					ishowacc: true, //当手机邮箱输出变成true
					ispass: false, //是否打来密码查看器
					ispass2: false, //再次填写密码是否打来密码查看器
					
					show2: false,
					filteredItems: [{
							country_image: '/static/dazi/china.png',
							en: '中文',
							mobile_code: 20
						},
						{
							country_image: '/static/dazi/china.png',
							en: '中文',
							mobile_code: 20
						},
						{
							country_image: '/static/dazi/china.png',
							en: '中文',
							mobile_code: 20
						},
						{
							country_image: '/static/dazi/china.png',
							en: '中文',
							mobile_code: 20
						},
						{
							country_image: '/static/dazi/china.png',
							en: '中文',
							mobile_code: 20
						}
					], // 存储过滤后的结果
					currylist: [], //国家选择
					doubelslel: 0, //选择的国家
					imgcurry: {}, //默认嗯国家选择
			}
		},
		methods:{
			opencury() {
				this.show2 = true
			},
			//选择的国家
			changecurry(item) {
				console.log(item)
				this.imgcurry = item
				this.show2 = false
				this.query = ''
			},
			
		}
	}
</script>

<style lang="scss">
	.busnd {
		margin: 100rpx 0 30rpx;
		background-color: rgba(255, 154, 233, 0.4);
		height: 110rpx;
		text-align: center;
		line-height: 110rpx;
		border-radius: 100rpx;
		color: #fff;
		font-size: 32rpx;
	}
	
	.bgd {
		background: rgba(88, 168, 255, 0.1);
		border: 1px solid rgba(88, 168, 255, 1) !important;
	
	}
	.send {
		color: rgba(251, 117, 214, 1);
		font-size: 28rpx;
	}
	
	.acys {
		color: #0FA088 !important;
	}
	
	.ontet {
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.ados {
		color: rgba(131, 116, 135, 1);
		font-size: 24rpx;
	}
	
	.klia {
		display: flex;
		align-items: center;
	
		image {
			margin-right: 30rpx;
			width: 50rpx;
			height: 50rpx;
			vertical-align: middle;
			border-radius: 50rpx;
		}
	
		.nals {
			color: rgba(42, 34, 47, 1);
			font-size: 28rpx;
		}
	}
	
	.serdh {
		margin: 30rpx 0;
		height: 96rpx;
		line-height: 96rpx;
		border-radius: 30rpx;
		border: 1px solid #CFD6E3;
		display: flex;
		align-items: center;
	
	
	}
	
	.u-border {
		border-style: none !important;
	}
	
	.ropwen {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.ediuyt {
		width: 48rpx;
		height: 48rpx;
		vertical-align: middle;
	}
	
	.lesi {
		color: rgba(0, 0, 0, 1);
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.sleguo {
		padding: 30rpx;
		width: 750rpx;
		background-color: #fff;
		z-index: 9999999999;
		border-radius: 50rpx 50rpx 0 0;
	}
	
	.incenm {
		width: 60%;
		// background-color: #ccc;
	}
	
	.botm {
		width: 20rpx;
		height: 16rpx;
		vertical-align: middle;
	}
	
	.sechs {
		display: flex;
		align-items: center;
	
	
	
		.senum {
			padding: 0 6rpx;
			color: rgba(42, 34, 47, 1);
			font-size: 28rpx;
		}
	
		.cury {
			width: 48rpx;
			height: 48rpx;
		}
	}
	
	.xijsd {
		border: 1px solid rgba(237, 229, 237, 1);
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100rpx;
		padding: 0 30rpx;
		border-radius: 24rpx;
	}
	
	.conste {
		margin: 30rpx 0;
	}
	
	.co {
		color: rgba(195, 176, 195, 1);
		font-size: 28rpx;
	}
	
	.siecle {
		width: 44rpx;
		height: 44rpx;
	}
	.seins{
		padding: 30rpx;
		margin-top: 30rpx;
	}
	.urtems {
		.shud {
			color: rgba(42, 34, 47, 1);
			font-size: 28rpx;
		}
	
		.incenm {}
	}
	
</style>